<template>
	<view class="add page c00">
		<view class="bgf7 p12">
			<view class="bgff px14 pb10">

				<view class="flex flexC borb py12">
					<text class="flex1">券名</text>
					<input type="text" v-model="coupon.sku_name" disabled="disable" class="py3 aliR" />
				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">时长</text>
					<input type="digit" v-model="hour" placeholder="抵扣时长" class="py3 aliR" />
				</view>

				<view class="flex flexS borb pb12 pt18">
					<text class="mr14 pt3">台桌范围</text>
					<view class="flex flexC flexW flex1">
						<text v-for="(item,index) in list" :key="index" @click="clickRoom(item)"
							class="mb6 r40 px12 py4 mr6" :class="item.check==true?'bged':'bgf6'">{{item.name}}</text>
					</view>
				</view>

				<view class="flex flexS borb pb12 pt18">
					<text class="mr14 pt3">日期范围</text>
					<view class="flex flexC flexW flex1">
						<text v-for="(item,index) in weekList" :key="index" @click="clickWeek(item)"
							class="mb6 r40 px12 py4 mr6" :class="item.check == true?'bged':'bgf6'">周{{item.name}}</text>
					</view>
				</view>

				<view class="flex flexC  py12">
					<text class="flex1">使用时间段</text>
					<view class="flex flexC fs12 mt12">
						<picker mode="time" @change="dateStartChange">
							<text class="c99 w100 px12 py7 bor r40 mr10">{{startTime}}</text>
						</picker>
						<picker mode="time" @change="dateEndChange">
							<text class="c99 w100 px12 py7 bor r40 mr10">{{endTime}}</text>
						</picker>

					</view>
				</view>

			</view>
			<view class="flex flexC flexJC py20">
				<view class="aliC py12 w-17 bg41 r40" @click="save">保存</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				shop_id: '',
				room_id: '',
				detail: null,
				tagShow: false,
				name: '',
				hour: "",
				line_price: "",
				price: "",
				num: "",
				valid_day: "",
				startTime: '00:00',
				endTime: "23:59",
				selectShop: null,
				list: [],

				weekList: [{
					check: true,
					name: "一"
				}, {
					check: true,
					name: "二"
				}, {
					check: true,
					name: "三"
				}, {
					check: true,
					name: "四"
				}, {
					check: true,
					name: "五"
				}, {
					check: true,
					name: "六"
				}, {
					check: true,
					name: "日"
				}],

				coupon: null,
				roomList:[]
			};
		},
		onLoad(option) {

			console.info(option);
			this.coupon = JSON.parse(option.item);
			if (this.coupon.room_id != -1 || this.coupon.room_id != "") {
				this.hour = this.coupon.hour;
				console.info("===use_time===="+this.coupon.use_time);
				if(this.hour == -1){
					this.hour = "";
				}
				if(this.coupon.use_time != ""){
					this.startTime = this.coupon.use_time.split("~")[0];
					this.endTime = this.coupon.use_time.split("~")[1];
				}
				
				console.info(this.coupon.room_id)
				if(this.coupon.room_id != ""){
					this.roomList = JSON.parse(this.coupon.room_id);
				}
				if(this.coupon.week != ""){
					var week = JSON.parse(this.coupon.week);
					for (var i = 0; i < this.weekList.length; i++) {
						this.weekList[i].check = false;
					}
					for (var i = 0; i < this.weekList.length; i++) {
					
						for (var j = 0; j < week.length; j++) {
							var index = week[j];
							if (index == "1") {
								index = "一";
							} else if (index == "2") {
								index = "二";
					
							} else if (index == "3") {
								index = "三";
					
							} else if (index == "4") {
								index = "四";
					
							} else if (index == "5") {
								index = "五";
					
							} else if (index == "6") {
								index = "六";
					
							} else if (index == "7") {
								index = "日";
					
							}
							if (index == this.weekList[i].name) {
								this.weekList[i].check = true;
							}
						}
					}
				}
			}
			this.getDetail();
		},

		onShow() {

		},
		methods: {

			clickRoom(item) {
				item.check = !item.check;
			},

			clickWeek(item) {
				item.check = !item.check;
			},

			addNotice() {
				var obj = new Object();
				obj.name = "";
				this.notice.push(obj);
			},

			dateStartChange(e) {
				this.startTime = e.detail.value;
			},

			dateEndChange(e) {
				this.endTime = e.detail.value;

			},


			save() {


				if (this.hour == '') {
					uni.showToast({
						title: "请填写时长"
					})
					return;
				}

				if (this.startTime == "") {

					uni.showToast({
						title: "请选择开始时间"
					})
					return;
				}
				if (this.endTime == "") {

					uni.showToast({
						title: "请选择结束时间"
					})
					return;
				}

				var room = new Array();
				for (var i = 0; i < this.list.length; i++) {

					if (this.list[i].check == true) {
						room.push(this.list[i]);
					}
				}
				if (room.length == 0) {
					uni.showToast({
						title: "请点击选择台桌"
					})
					return;
				}

				var room = new Array();
				for (var i = 0; i < this.list.length; i++) {

					if (this.list[i].check == true) {
						room.push(this.list[i].id);
					}
				}
				if (room.length == 0) {
					uni.showToast({
						title: "请点击选择台桌"
					})
					return;
				}
				
				var week = new Array();
				for(var i=0;i<this.weekList.length;i++){
					if(this.weekList[i].check == true){
						week.push(this.weekList[i]);
					}
				}
				
				if(week.length == 0){
					uni.showToast({
						title:"请点击选择日期"
					})
					return;
				}


				let param = {

					id: this.coupon.id,
					hour: this.hour,
					room: JSON.stringify(room),
					start:this.startTime,
					end:this.endTime,
					week:JSON.stringify(week),
					type:'tq'
				}
				
				


				this.$api.douCouponSet(param).then(res => {

					if (res.code == 1) {
						uni.showModal({
							title: "提示",
							content: "关联成功",
							showCancel: false,
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},





			getDetail() {
				let param = {
					shop_id: this.coupon.shop_id
				};
				let that = this;
				this.$api.tableList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
						for (var i = 0; i < that.list.length; i++) {
							that.list[i].check = false;
							
							for (var j = 0; j < that.roomList.length; j++) {
								if (that.roomList[j] == that.list[i].id) {
									that.list[i].check = true;
								}
							}
						}
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		.w48 {
			width: 96rpx;
			height: 96rpx;
		}

		.imgbox {
			width: 164rpx;
			height: 164rpx;
			background-color: #E8E8E8;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
				background: rgba(181, 180, 180, .8);
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>